<template>
<div>
   <van-nav-bar title="开通会员卡" left-arrow @click-left="onClickLeft" />
  <div id="already">   
     <svg class="icon-duihao" aria-hidden="true">
        <use xlink:href="#icon-duihao2"></use>
      </svg>
      <h4>签到成功</h4>
    <div>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-jifen"></use>
      </svg>
      <span>每天签到可获得积分1分</span>
    </div>
    <div>
       <svg class="icon icon-2" aria-hidden="true">
        <use xlink:href="#icon-jifen1"></use>
      </svg>
      <span>连签7天额外获得9积分</span>
    </div>
    <div>
       <svg class="icon icon-3" aria-hidden="true">
        <use xlink:href="#icon-liwu"></use>
      </svg>
      <span>可兑换奈雪券及周边好礼</span>
    </div>
    <button>明天提醒我</button>
  </div>
  </div>
</template>


<script>
export default {
  mounted () {
     setTimeout(() => {
        this.$router.push("me");
      }, 2000);
  },
  methods: {
     onClickLeft(){
      this.$router.push("sign")    
    },   
  },
};
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
::v-deep .van-icon-arrow-left:before {
  color: black;
}
#already{
  margin-top: 5vh;
}
#already>div{
  margin-top: 3vh;
}
.icon-duihao{
  width: 15%;
  height: 10vh;
}
h4{
  margin-bottom: 6vh;
}
span{
  font-size: 13px;
}
.icon{
  height: 3vh;
  width: 7vh;
  vertical-align: top;
}
.icon.icon-2{
  margin-left: -1vh;
}
.icon.icon-3{
  margin-left: 1vh;
}
button{
  background-color: #a7d500;
  color: white;
  font-size: 14px;
  margin-top: 10vh;
  padding: 1vh 10vh;
  border: 0;
  border-radius: 15px;
}
</style>